<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <select name="" id="province"></select>
    <select name="" id="city"></select>
    <select name="" id="county"></select>
</body>
</html>
<script>
    const domProvince = document.querySelector('#province')
    const domCity = document.querySelector('#city')
    const domCounty = document.querySelector('#county')

    function ajax(url,method = 'get'){
        const xhr = new XMLHttpRequest()
        xhr.open(method,url)
        xhr.send()

        return new Promise((resolve,reject) => {
            xhr.onload = function(){
                const data = JSON.parse(xhr.response)
                resolve(data)
            }
        })


    }

    function render(data,dom){
        dom.innerHTML = data.map(item =>{
            return `
                <option value="${item.ID}">${item.AddName}</option>
            `
        }
        )
    }
    
    let province = null,city = null,county = null

    ajax('http://127.0.0.1:8899')
        .then(res => {
            // console.log(res);
            render(res,domProvince)
            province = res;

            city = res[0].children
            render(city,domCity)
            
            county = city[0].children
            render(county,domCounty)
        })
    

    domProvince.onchange = function(item){
        // console.log(item.target.value);
        // console.log(province);
        
        //省市变化
        city = province.find(e => e.ID == item.target.value).children
        // console.log(city);
        render(city,domCity)

        //市 县变化
        render(city[0].children,domCounty)

    }
    domCity.onchange = function(item){

        // console.log(item.target.value);
        //市变化 县跟着改变

        const sum = city.find(d => d.ID == item.target.value)

        county = sum.children

        // console.log(county,domCounty);

        // render(county[0].children,domCounty)


    }







</script>